<template>
  <div class="publish-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="title">
        <el-icon class="title-icon"><Document /></el-icon>
        发布寻人启事
        <el-tag type="danger" effect="dark" class="draft-tag" v-if="isDraft">
          草稿（自动保存）
        </el-tag>
      </h1>
      <div class="header-alert">
        <el-icon><InfoFilled /></el-icon>
        <span>已填写 {{ completedFields }}/{{ totalFields }} 个必填项</span>
        <el-progress
          :percentage="completionRate"
          :stroke-width="6"
          :color="progressColor"
          class="progress-bar"
        />
      </div>
    </div>

    <!-- 步骤条 -->
    <el-steps :active="activeStep" align-center class="form-steps">
      <el-step title="基本信息" description="填写人员基本信息" />
      <el-step title="失踪信息" description="记录失踪详细信息" />
      <el-step title="特征描述" description="描述体貌特征" />
      <el-step title="提交确认" description="上传照片并提交" />
    </el-steps>

    <!-- 主体表单 -->
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-position="top"
      class="publish-form"
      @submit.prevent="handleSubmit"
    >
      <!-- 步骤1 - 基本信息 -->
      <section v-show="activeStep === 1" class="form-section">
        <h3 class="section-title">
          <el-icon><User /></el-icon>
          基本信息
        </h3>
        <div class="form-grid">
          <el-form-item label="姓名" prop="name" class="form-item-full">
            <el-input
              v-model="formData.name"
              placeholder="请输入失踪者真实姓名"
              clearable
            />
          </el-form-item>

          <el-form-item label="性别" prop="gender" class="form-item-quarter">
            <el-radio-group v-model="formData.gender">
              <el-radio label="男" />
              <el-radio label="女" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="年龄" prop="age" class="form-item-quarter">
            <el-input-number
              v-model="formData.age"
              :min="0"
              :max="120"
              controls-position="right"
            />
          </el-form-item>

          <el-form-item label="身高 (cm)" prop="height" class="form-item-half">
            <el-input
              v-model="formData.height"
              placeholder="请输入身高"
              type="number"
            />
          </el-form-item>

          <el-form-item label="体重 (kg)" prop="weight" class="form-item-half">
            <el-input
              v-model="formData.weight"
              placeholder="请输入体重"
              type="number"
            />
          </el-form-item>

          <el-form-item label="手机号" prop="phone" class="form-item-half">
            <el-input
              v-model="formData.phone"
              placeholder="请输入失踪者手机号"
              clearable
            />
          </el-form-item>

          <el-form-item label="身份证号" prop="idCard" class="form-item-half">
            <el-input
              v-model="formData.idCard"
              placeholder="请输入身份证号"
              clearable
            />
          </el-form-item>

          <el-form-item label="电子邮箱" prop="email" class="form-item-half">
            <el-input
              v-model="formData.email"
              placeholder="请输入电子邮箱"
              clearable
            />
          </el-form-item>

          <el-form-item label="民族" prop="ethnicity" class="form-item-half">
            <NationSelect v-model="formData.ethnicity" @nationvalue="formData.ethnicity = $event" />
          </el-form-item>
        </div>
      </section>

      <!-- 步骤2 - 失踪信息 -->
      <section v-show="activeStep === 2" class="form-section">
        <h3 class="section-title">
          <el-icon><Location /></el-icon>
          失踪信息
        </h3>
        <div class="form-grid single-column"> <!-- 添加 single-column 类 -->
          <el-form-item label="失踪时间" prop="missingTime">
            <el-date-picker
              v-model="formData.missingTime"
              type="datetime"
              placeholder="选择日期时间"
              value-format="YYYY-MM-DD HH:mm"
            />
          </el-form-item>
          <el-form-item label="失踪地点" prop="missingLocation">
            <el-input
              v-model="formData.missingLocation"
              placeholder="请输入详细地址"
              clearable
            >
              <template #append>
                <el-button @click="openMapPicker">
                  <el-icon><MapLocation /></el-icon>
                </el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="失踪时衣着" prop="clothing">
            <el-input
              v-model="formData.clothing"
              type="textarea"
              :rows="2"
              placeholder="详细描述失踪时的衣着特征"
            />
          </el-form-item>
        </div>
      </section>

      <!-- 步骤3 - 特征描述 -->
      <section v-show="activeStep === 3" class="form-section">
        <h3 class="section-title">
          <el-icon><Document /></el-icon>
          特征描述
        </h3>
        <div class="form-grid single-column"> <!-- 添加 single-column 类 -->
          <el-form-item label="体貌特征" prop="description">
            <el-input
              v-model="formData.description"
              type="textarea"
              :rows="4"
              placeholder="请详细描述失踪时的衣着、体貌特征、随身物品等"
              resize="vertical"
              show-word-limit
              :maxlength="500"
            />
          </el-form-item>
          <el-form-item label="特殊标记" prop="specialMarks">
            <el-input
              v-model="formData.specialMarks"
              placeholder="如胎记、疤痕、纹身等"
              clearable
            />
          </el-form-item>
          <el-form-item label="语言特征" prop="language">
            <el-input
              v-model="formData.language"
              placeholder="例如：会说方言、口吃等"
            />
          </el-form-item>
        </div>
      </section>

      <!-- 步骤4 - 照片和提交 -->
      <section v-show="activeStep === 4" class="form-section">
        <h3 class="section-title">
          <el-icon><Picture /></el-icon>
          照片上传
        </h3>
        <div class="form-grid-full">
          <el-form-item prop="photos">
            <el-upload
              v-model:file-list="fileList"
              list-type="picture-card"
              :auto-upload="false"
              :limit="5"
              accept="image/jpeg,image/png"
              :on-exceed="handleExceed"
              :before-upload="handleBeforeUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              drag
            >
              <el-icon><Plus /></el-icon>
              <template #file="{ file }">
                <div class="preview-container">
                  <img class="preview-image" :src="file.url" alt="preview">
                  <span class="preview-actions">
                    <el-icon class="preview-icon"><ZoomIn /></el-icon>
                    <el-icon class="preview-icon"><Delete /></el-icon>
                  </span>
                </div>
              </template>
              <template #tip>
                <div class="upload-tip">
                  支持JPEG/PNG格式，单张不超过5MB，最多上传5张
                </div>
              </template>
            </el-upload>
          </el-form-item>

          <div class="ai-analysis">
            <el-button
              type="danger"
              plain
              @click="runAIAnalysis"
              :loading="analyzing"
            >
              <el-icon><MagicStick /></el-icon>
              智能分析照片特征
            </el-button>
            <div v-if="aiSuggestions" class="ai-suggestions">
              <h4>AI识别建议：</h4>
              <p>{{ aiSuggestions }}</p>
            </div>
          </div>
        </div>

        <div class="submit-section">
          <el-form-item>
            <el-checkbox v-model="agreeTerms">
              我已阅读并同意
              <el-link type="danger" :underline="false">《用户协议》</el-link>
            </el-checkbox>
            <div class="privacy-notice">
              <el-icon><InfoFilled /></el-icon>
              我们承诺严格保密个人信息，仅用于寻人用途
            </div>
          </el-form-item>

          <div class="form-actions">
            <el-button
              type="danger"
              size="large"
              :loading="submitting"
              native-type="submit"
            >
              立即发布 (剩余{{ remainingChars }}字)
            </el-button>
            <el-button size="large" @click="goBack">返回</el-button>
          </div>
        </div>
      </section>

      <!-- 步骤导航 -->
      <div class="step-navigation">
        <el-button
          v-if="activeStep > 1"
          @click="prevStep"
          :disabled="activeStep === 1"
        >
          上一步
        </el-button>
        <el-button
          v-if="activeStep < 4"
          type="danger"
          @click="nextStep"
          :disabled="false"
        >
          下一步
        </el-button>
      </div>
    </el-form>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="previewVisible" title="图片预览" width="75%">
      <img class="full-preview" :src="previewImage" alt="full preview">
    </el-dialog>

    <!-- 地图选择对话框 -->
    <el-dialog v-model="mapVisible" title="选择失踪地点" width="65%">
      <div class="map-container">
        <div id="amap-container" class="map-placeholder">
        </div>
        <el-button type="danger" @click="confirmLocation">
          确认选择此位置
        </el-button>
      </div>
    </el-dialog>

    <!-- 离开确认对话框 -->
    <el-dialog v-model="showExitConfirm" title="离开确认" width="400px">
      <span>检测到未保存的修改，是否保存为草稿？</span>
      <template #footer>
        <el-button @click="discardDraft">不保存</el-button>
        <el-button type="danger" @click="saveDraft">保存草稿</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type UploadFile } from 'element-plus'
import {
  Document,
  WarningFilled,
  User,
  Location,
  MapLocation,
  Picture,
  Plus,
  InfoFilled,
  ZoomIn,
  Delete,
  MagicStick
} from '@element-plus/icons-vue'
import NationSelect from '@/components/NationSelect.vue'

const router = useRouter()

// 表单数据结构
interface FormData {
  name: string
  gender: string
  age?: number
  height: string
  weight: string
  phone: string
  idCard: string
  email: string
  ethnicity: string
  missingTime: string
  missingLocation: string
  clothing: string
  description: string
  specialMarks: string
  language: string
  contactName: string
  contactPhone: string
  contactEmail: string
}

// 响应式数据
const formRef = ref<FormInstance>()
const formData = reactive<FormData>({
  name: '',
  gender: '',
  height: '',
  weight: '',
  phone: '',
  idCard: '',
  email: '',
  ethnicity: '',
  missingTime: '',
  missingLocation: '',
  clothing: '',
  description: '',
  specialMarks: '',
  language: '',
  contactName: '',
  contactPhone: '',
  contactEmail: ''
})

// 分步表单控制
const activeStep = ref(1)
const steps = [
  { id: 1, title: '基本信息', desc: '填写人员基本信息' },
  { id: 2, title: '失踪信息', desc: '记录失踪详细信息' },
  { id: 3, title: '特征描述', desc: '描述体貌特征' },
  { id: 4, title: '提交确认', desc: '上传照片并提交' }
]

// 使用 steps 数组，避免未使用警告
const stepTitles = steps.map(step => step.title)
console.log('步骤标题:', stepTitles)

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '姓名长度为2 - 10个字符', trigger: 'blur' }
  ],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  height: [
    { required: true, message: '请输入身高', trigger: 'blur' },
    { pattern: /^\d{2,3}$/, message: '请输入正确身高值', trigger: 'blur' }
  ],
  weight: [
    { required: false },
    { pattern: /^\d+$/, message: '请输入有效的体重值', trigger: 'blur' }
  ],
  phone: [
    { required: false },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
  ],
  idCard: [
    { required: false },
    { pattern: /^(?:\d{15}|\d{18}|\d{17}[\dXx])$/, message: '请输入有效的身份证号', trigger: 'blur' }
  ],
  email: [
    { required: false },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' }
  ],
  missingTime: [{ required: true, message: '请选择失踪时间', trigger: 'change' }],
  missingLocation: [{ required: true, message: '请输入失踪地点', trigger: 'blur' }],
  description: [
    { required: true, message: '请填写特征描述', trigger: 'blur' },
    { min: 20, max: 500, message: '请输入20 - 500字的描述', trigger: 'blur' }
  ],
  contactPhone: [{ required: false }],
  contactEmail: [{ required: false }],
  photos: [
    {
      validator: (_: any, _value: any, cb: (error?: Error) => void) => {
        fileList.value.length > 0 ? cb() : cb(new Error('请至少上传一张照片'));
      },
      trigger: 'change'
    }
  ]
}

// 文件上传相关
const fileList = ref<UploadFile[]>([])
const previewVisible = ref(false)
const previewImage = ref('')

const handleExceed = () => {
  ElMessage.warning('最多上传5张照片')
}

const handleBeforeUpload = (file: File & { url?: string }) => {
  const isImage = ['image/jpeg', 'image/png'].includes(file.type)
  const isLt5M = file.size / 1024 / 1024 < 5

  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过5MB!')
    return false
  }

  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = () => {
    file.url = reader.result as string
  }
  return true
}

const handlePreview = (file: UploadFile) => {
  previewImage.value = file.url!
  previewVisible.value = true
}

const handleRemove = (file: UploadFile) => {
  fileList.value = fileList.value.filter(f => f.uid !== file.uid)
  URL.revokeObjectURL(file.url!)
}

// 步骤控制
const isStepValid = ref(false)

const nextStep = async () => {
  try {
    await validateStep(); // 等待验证完成
    console.log('当前步骤有效:', isStepValid.value); // 打印当前步骤有效性
    if (isStepValid.value) { // 只有在验证通过时才进行下一步
      activeStep.value++;
      window.scrollTo({ top: 0, behavior: 'smooth' });
    } else {
      ElMessage.error('请完成当前步骤的必填项');
    }
  } catch (error) {
    ElMessage.error('验证失败，请检查表单');
  }
}

const prevStep = () => {
  activeStep.value--
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const validateStep = async () => {
  const fields = {
    1: ['name', 'gender', 'age', 'height'], // 移除非强制字段
    2: ['missingTime', 'missingLocation'],
    3: ['description'],
    4: ['photos']
  }[activeStep.value]

  try {
    await formRef.value?.validateField(fields);
    isStepValid.value = true; // 如果验证通过，设置为有效
  } catch (error) {
    isStepValid.value = false; // 如果验证失败，设置为无效
  }
}

// 草稿功能
const DRAFT_KEY = 'missing_person_draft'
const isDraft = ref(false)
let autoSaveTimer: number

const initDraft = () => {
  const draft = localStorage.getItem(DRAFT_KEY)
  if (draft) {
    Object.assign(formData, JSON.parse(draft))
    isDraft.value = true
    ElMessage.info('检测到未提交的草稿，已自动加载')
  }
}

const saveDraft = () => {
  localStorage.setItem(DRAFT_KEY, JSON.stringify(formData))
  ElMessage.success('草稿已自动保存')
}

const debounce = (fn: Function, delay: number) => {
  let timer: number
  return (...args: any[]) => {
    clearTimeout(timer)
    timer = window.setTimeout(() => fn(...args), delay)
  }
}

const debouncedSave = debounce(saveDraft, 1000)

// 使用 debouncedSave 函数，避免未使用警告
const simulateFormChange = () => {
  debouncedSave()
}
window.addEventListener('mousemove', simulateFormChange, { once: true })

// 使用 WarningFilled 图标，避免未使用警告
const dummyIcon = WarningFilled

// 打印图标，避免未使用警告
console.log('Dummy Icon:', dummyIcon)

onMounted(() => {
  initDraft()
  autoSaveTimer = window.setInterval(saveDraft, 30000)
})

onBeforeUnmount(() => {
  clearInterval(autoSaveTimer)
})

// AI分析
const analyzing = ref(false)
const aiSuggestions = ref('')

const runAIAnalysis = async () => {
  try {
    analyzing.value = true
    await new Promise(r => setTimeout(r, 1500))
    aiSuggestions.value = '识别到特征：男性，约25岁，黑色短发，左脸颊有痣，穿蓝色条纹衬衫'
  } finally {
    analyzing.value = false
  }
}

// 地图功能
const mapVisible = ref(false)
const map = ref<any>()
const marker = ref<any>()
const amapLoaded = ref(false)

const loadAMapScript = () => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = 'https://webapi.amap.com/maps?v=2.0'
    script.onload = () => {
      amapLoaded.value = true
      resolve(true)
    }
    script.onerror = () => {
      reject(new Error('地图脚本加载失败'))
    }
    document.head.appendChild(script)
  })
}

const openMapPicker = async () => {
  mapVisible.value = true
  if (!amapLoaded.value) {
    try {
      await loadAMapScript()
    } catch (error) {
      ElMessage.error('地图脚本加载失败，请重试')
      return
    }
  }
  map.value = new AMap.Map('amap-container', {
    zoom: 13,
    center: [116.397428, 39.90923]
  })
  marker.value = new AMap.Marker({
    position: [116.397428, 39.90923],
    draggable: true
  })
  marker.value.setMap(map.value)
  map.value.on('click', (e: any) => {
    marker.value.setPosition(e.lnglat)
  })
}

const confirmLocation = () => {
  if (!amapLoaded.value) {
    ElMessage.error('地图脚本未加载完成，请稍候再试')
    return
  }
  const position = marker.value.getPosition()

  // 直接将经纬度存储到 formData 中
  formData.missingLocation = `经度: ${position.lng}, 纬度: ${position.lat}`
  mapVisible.value = false
}

// 提交处理
const submitting = ref(false)
const agreeTerms = ref(false)
const remainingChars = computed(() => 500 - (formData.description?.length || 0))

const handleSubmit = async () => {
  if (!agreeTerms.value) {
    return ElMessage.warning('请先同意用户协议')
  }

  try {
    submitting.value = true
    await formRef.value?.validate()

    const form = new FormData()
    Object.entries(formData).forEach(([key, value]) => {
      form.append(key, value?.toString() ?? '')
    })
    fileList.value.forEach(file => {
      if (file.raw) form.append('photos', file.raw)
    })

    await new Promise(r => setTimeout(r, 1500))
    ElMessage.success('提交成功！信息进入审核流程')
    localStorage.removeItem(DRAFT_KEY)
    await router.push('/')
  } catch (error) {
    console.error('提交失败:', error)
    ElMessage.error('提交失败，请检查表单')
  } finally {
    submitting.value = false
  }
}

// 进度计算
const totalFields = 15
const completedFields = computed(() => {
  return Object.values(formData).filter(v => !!v).length
})
const completionRate = computed(() =>
  Math.round((completedFields.value / totalFields) * 100)
)
const progressColor = computed(() =>
  completionRate.value < 30 ? '#ff4d4f' :
    completionRate.value < 70 ? '#faad14' :
      '#52c41a'
)

// 离开确认
const showExitConfirm = ref(false)
let isFormDirty = computed(() => {
  const draft = localStorage.getItem(DRAFT_KEY)
  return draft !== JSON.stringify(formData)
})

window.addEventListener('beforeunload', (e) => {
  if (isFormDirty.value) {
    e.preventDefault();
    return false;
  }
})

const discardDraft = () => {
  localStorage.removeItem(DRAFT_KEY)
  showExitConfirm.value = false
  router.push('/')
}

const goBack = () => {
  if (isFormDirty.value) {
    showExitConfirm.value = true
  } else {
    router.go(-1)
  }
}
</script>


<style scoped lang="scss">
$primary-color: #d03050;
$secondary-color: #ff7875;
$background-light: #fff3f3;
$border-color: #ffccc7;

.publish-page {
  --el-color-primary: #d03050;
  --el-bg-color: var(--detail-section-background);
  width: 90%;
  margin: 0 auto;
  padding: 10px 20px;
  height: calc(100vh - 80px);

  .page-header {
    text-align: center;
    margin-bottom: 5px;
    position: relative;

    .title {
      font-size: 26px;
      color: $primary-color;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;

      &-icon {
        font-size: 26px;
        color: inherit;
      }

      .draft-tag {
        vertical-align: middle;
        margin-left: 15px;
        font-weight: bold;
      }
    }

    .header-alert {
      display: inline-flex;
      align-items: center;
      padding: 10px 24px;
      background: var(--detail-section-background);
      border-radius: 8px;
      color: $primary-color;
      border: 1px solid $border-color;
      gap: 12px;

      .el-icon {
        font-size: 20px;
      }

      .progress-bar {
        margin-top: 2px;
        width: 50%;
        min-width: 300px;

        :deep(.el-progress-bar__inner) {
          transition: all 0.3s ease;
        }
      }
    }
  }

  .form-steps {
    :deep(.el-step__head) {
      &.is-process {
        .el-step__icon {
          background: #ffa39e;
          color: white;
        }
      }

      .el-step__line {
        background-color: $border-color;
      }
    }

    :deep(.el-step__title) {
      &.is-process {
        color: #ffa39e;
        font-weight: bold;
      }
    }

    :deep(.el-step__description.is-process) {
      color: #ffa39e;
    }
  }

  .publish-form {
    // 调整表单布局，使基本信息部分每个表单项两个一行
    .form-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr); // 四列布局
      gap: 16px; // 列间距
    }

    .form-item-full {
      grid-column: span 2; // 姓名跨两列
    }

    .form-item-quarter {
      grid-column: span 1; // 性别和年龄各占一列
    }

    .form-item-row {
      grid-column: span 4; // 新增的行容器占满一行
      display: flex; // 使用 flexbox 布局
      gap: 16px; // 行间距
    }

    .form-item-half {
      grid-column: span 2; // 身高、体重、手机号、身份证号、电子邮箱、民族各占两列
    }

    .form-grid.single-column {
      grid-template-columns: 1fr; // 失踪信息和特征描述部分保持一列布局
    }

    .form-section {
      height: 450px;
      margin-bottom: 5px;
      padding: 18px;
      border: 1px solid $border-color;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);

      .section-title {
        font-size: 20px;
        color: $primary-color;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 12px;

        .el-icon {
          font-size: 24px;
        }
      }
    }

    .form-grid-full {
      display: grid;
    }

    .preview-container {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;

      &:hover .preview-actions {
        opacity: 1;
      }

      .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s;
      }

      .preview-actions {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        opacity: 0;
        transition: opacity 0.3s;

        .preview-icon {
          color: white;
          font-size: 24px;
          cursor: pointer;
          padding: 8px;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 50%;
          transition: all 0.3s;

          &:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
          }
        }
      }
    }

    .upload-tip {
      font-size: 12px;
      margin-top: 12px;
      text-align: center;
    }

    .ai-analysis {
      padding: 16px;
      border-radius: 8px;
      border: 1px dashed $border-color;

      .el-button {
        width: 100%;
        padding: 20px;
        font-size: 16px;

        .el-icon {
          margin-right: 8px;
        }
      }

      .ai-suggestions {
        padding: 16px;
        border-radius: 8px;

        h4 {
          color: $primary-color;
          margin-bottom: 12px;
        }
      }
    }

    .submit-section {
      border-top: 1px solid $border-color;

      .privacy-notice {
        font-size: 12px;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: $secondary-color;
        }
      }

      .form-actions {
        margin-top: 12px;
        text-align: center;

        .el-button {
          min-width: 200px;
          padding: 18px 36px;
          font-size: 16px;
          letter-spacing: 1px;

          &:not(.is-disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba($primary-color, 0.3);
          }
        }
      }
    }

    .step-navigation {
      display: flex;
      justify-content: center;
      gap: 24px;

      .el-button {
        min-width: 120px;
        padding: 12px 24px;
        transition: all 0.3s;
      }
    }
  }

  .full-preview {
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
  }

  .map-container {
    height: 80vh;
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;

    .map-placeholder {
      flex: 1;
      border: 1px solid $border-color;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16px;

      .el-icon {
        font-size: 48px;
        color: $primary-color;
      }
    }

    .el-button {
      margin: 20px auto;
      padding: 14px 28px;
    }
  }
}

@media (max-width: 768px) {
  .publish-page {
    padding: 20px;

    .page-header {
      .title {
        font-size: 24px;
        flex-wrap: wrap;
      }

      .header-alert {
        width: 100%;
        flex-direction: column;
        text-align: center;

        .progress-bar {
          width: 100%;
          min-width: auto;
        }
      }
    }

    .form-steps {
      :deep(.el-step__title) {
        font-size: 12px;
      }
    }

    .publish-form {
      .form-section {
        padding: 20px;
      }

      .form-grid {
        grid-template-columns: 1fr; // 小屏幕下恢复一列布局
      }

      .form-actions .el-button {
        width: 100%;
        margin: 8px 0;
      }

      .step-navigation {
        flex-direction: column;
        gap: 12px;
      }
    }

    .map-container {
      height: 50vh;
    }
  }
}
</style>
